
<template>
    <div>
        <div class="header">
            <h1>用户管理界面</h1>
        </div>
        <Admin_User_List></Admin_User_List>
        <form class="searchDiv">
            <div class="phoneNumber-inputs">
                <input v-model="phoneNumber" type="text" placeholder="手机号" required />
            </div>
            <div class="salary-buttons">
                <button type="button" @click="searchUserByPhone" class="custom-button">查询用户</button>
            </div>
        </form>

        <form class="BanDiv">
            <div class="phoneNumber-inputs">
                <input v-model="user_ban.Phone_Number" type="text" placeholder="手机号" required />
            </div>
            <div class="select-reason">
                <label for="banReason">封禁原因:</label>
                <select v-model="user_ban.Ban_Reason" id="banReason" required>
                    <option value="违反规定">违反规定</option>
                    <option value="欺诈行为">欺诈行为</option>
                    <option value="滥用服务">滥用服务</option>
                </select>
            </div>
            <div class="salary-buttons">
                <button type="button" @click="banUser" class="custom-button">封禁用户</button>
            </div>
        </form>
    </div>
</template>

<script>
import Admin_User_List from '@/components/Admin_User_List.vue';
import axios from 'axios'; // 确保已经安装了axios

export default {
    data() {
        return {
            phoneNumber: '',

            user_ban:{
                Phone_Number:'',
                Ban_Time:'',
                Ban_Reason:''
                         }
        };
    },
    components: {
        Admin_User_List
    },
    methods: {
        searchUserByPhone() {
            // 发送请求到后端API，获取用户信息
            axios.get('http://localhost:8090/findUserByphoneNumber', {
                params: {
                    phoneNumber: this.phoneNumber // 假设后端需要名为phone的参数
                }
            })
            .then(response => {
                alert(JSON.stringify(response.data));
            })
            .catch(error => {
                // 处理请求错误
                console.error(error);
            });
        },

        banUser(){
            this.user_ban.Ban_Time = new Date().toLocaleString();
            axios.post('http://localhost:8090/AdminUser/BanUser',{
            Phone_Number:this.user_ban.Phone_Number,
            Ban_Time:this.user_ban.Ban_Time,
            Ban_Reason:this.user_ban.Ban_Reason

            }).then(response=>{
                if(response.data==='success'){
                    alert('封禁成功');
                }else{
                    alert('该用户不存在');
                }
            })
        }
    }
}
</script>
<style scoped>
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}


.header {
    background-color: gainsboro;
    color: white;
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header h1 {
    margin: 0;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.searchDiv, .BanDiv {
    position: fixed;
    bottom: 10px;
    padding: 20px;
    border: 2px solid #ddd;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 5px;
}

.searchDiv {
    left: 10px;
}

.BanDiv {
    right: 10px;
}


.updateSalary {
    right: 10px;
}

.searchDiv form, .updateSalary form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.salary-inputs, .salary-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.salary-inputs input {
    flex: 1;
    height: 40px;
    margin-right: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.salary-inputs input:last-child {
    margin-right: 0;
}

.salary-buttons .custom-button {
    flex: 1;
    margin-right: 10px;
}

.salary-buttons .custom-button:last-child {
    margin-right: 0;
}

.custom-button {
    height: 40px;
    font-size: 14px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-button:hover {
    background-color: #4cae4c;
}

input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

</style>
